<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html lang="zh-CN" class="no-js">
<head>
    <meta charset="UTF-8">
    <title>二手书信息网</title>

    <%@include file="/WEB-INF/jsp/common/component/head.jsp"%>
    <%--<link rel="stylesheet" href="${ctx}/assets/css/tpmo/templatemo-style.css">--%>

    <style type="text/css">
        .site-banner h2 {
            font-size: 32px;
            /*font-family: 'robotobold';*/
            margin-bottom: 30px;
        }

        .site-top {
            position: relative;
            z-index: 4;
            background: rgba(0,0,0,0.6);
            margin-bottom: 40px;
            padding-bottom: 60px;
        }

        .site-banner{
            padding-top: 40px;
        }

        .homebg{
            z-index: 0;
            background-image: url("${ctx}/assets/img/tpmo/bg.jpg");
            background-size: cover;
            background-repeat: no-repeat;
        }

        .post-masonry .post-thumb {
            border: 3px solid #fff;
            overflow: hidden;
            position: relative;
        }

        .post-thumb:hover{
            background-color: rgba(0,0,0,0.5);
            border: 3px solid orange;
        }

        .post-masonry .post-thumb .title-over {
            position: static;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0,0,0,0.7);
            padding: 15px 20px;
        }

        .blue {
            color: #6BE;
        }

        .green {
            color: #6E6;
        }

        .main-posts {
            position: relative;
            z-index: 6;
        }

        html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,menu,nav,output,ruby,section,summary,time,mark,audio,video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            vertical-align: baseline;
        }


        .post-masonry{
            margin-bottom: 30px;
        }

        .post-masonry .post-thumb img {
            width: 100%;
            display: block;
        }

        .bottomLoading{
            width:100%;
            height:48px;
            position: relative;
            /*top:100%;*/
            /*left:50%;*/
            line-height: 48px;
            color:#fff;
            /*padding-left:60px;*/
            font-size:18px;
            background: url(/assets/img/bottomLoading.gif) no-repeat 45%;
            /*opacity: 0.7;*/
            z-index:9999;
            -moz-border-radius:20px;
            -webkit-border-radius:20px;
            border-radius:20px;
            filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
            text-align: center;
        }

        .loaded {
            width:100%;
            height:48px;
            position: relative;
            line-height: 48px;
            color:#fff;
            font-size:18px;
            z-index:9999;
            -moz-border-radius:20px;
            -webkit-border-radius:20px;
            border-radius:20px;
            filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
            text-align: center;
        }

    </style>
</head>

<body>
    <div id="top">
        <%@include file="/WEB-INF/jsp/common/component/navbar.jsp"%>
    </div>

    <div id="wrap">
        <div class="content" class="homebg">
            <div class="site-top">
                <div class="site-banner">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-offset-2 col-md-8 text-center">
                                <h2><span class=" hidden blue">福大</span><span class="green">二手书信息网</span></h2>
                                <p></p>
                            </div>
                        </div>

                        <div class="row" id="searchDiv">
                            <form role="form" class="form-horizontal">
                                <div class="form-group">
                                    <div class="col-sm-6 col-md-offset-3">
                                        <input type="text" class="form-control" id="searchName" placeholder="书名">
                                    </div>
                                    <div class="col-sm-3">
                                        <button id="searchBtn" type="button" class="btn btn-primary">查询</button>
                                        <button id="toFilterBtn" type="button" class="btn btn-primary">高级选项</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div id="searchPanel" class="panel panel-default col-sm-6 col-md-offset-3" style="margin-top:10px;display: none;">
                            <div class="panel-heading">查询条件</div>
                            <div class="panel-body">
                                <form id="filterForm" class="form-horizontal">
                                    <div class="form-group" >
                                        <label class="control-label col-sm-3" for="name">书籍名称</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="name">
                                        </div>
                                        <div class="col-sm-1">
                                            <label>
                                                <span class="label label-warning" ></span>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-group" >
                                        <label class="control-label col-sm-3" for="isbn">ISBN</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="isbn">
                                        </div>
                                        <div class="col-sm-1">
                                            <label>
                                                <span class="label label-warning" ></span>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-3" for="lowPrice">价格区间</label>
                                        <div class="col-sm-3">
                                            <input type="text" class="form-control" id="lowPrice">
                                        </div>
                                        <div style="float:left;display: inline-block;margin-left: 5px;margin-right: 5px;">
                                            <span>—</span>
                                        </div>
                                        <div class="col-sm-3" >
                                            <input type="text" class="form-control" id="highPrice">
                                        </div>
                                        <div class="col-sm-1">
                                            <label class="control-label" for="highPrice">元</label>
                                        </div>
                                        <div class="col-sm-1">
                                            <label>
                                                <span class="label label-warning" ></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group" >
                                        <label class="control-label col-sm-3" for="author">作者</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="author">
                                        </div>
                                        <div class="col-sm-1">
                                            <label>
                                                <span class="label label-warning" ></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group" >
                                        <label class="control-label col-sm-3" for="publishingHouse">出版社</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="publishingHouse">
                                        </div>
                                        <div class="col-sm-1">
                                            <label>
                                                <span class="label label-warning" ></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group" >
                                        <div class="col-sm-offset-3">
                                            <button type="submit" style="margin-left:50px" id="filterBtn" class="btn btn-primary">查询</button>
                                            <button type="button" style="margin-left:10px" id="backSearchBtn" class="btn btn-primary">返回</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                    </div>
                </div> <!-- .site-banner -->
            </div> <!-- .site-top -->

            <!-- MAIN POSTS -->
            <div class="main-posts">
                <div class="container">
                    <div class="row">
                        <div class="blog-masonry masonry-true">
                        </div>
                    </div>
                </div>
            </div>

            <div class="loading loaded">
                <%--<span>正在载入</span>--%>
            </div>

            <div id="navigation"><a href="/book/pageData?page=1"></a></div>

            <%--<div class="loaded hidden" >已是最后一页</div>--%>
        </div><!-- /#content -->
    </div><!-- /#wrap -->

    <div id="here" class="post-masonry col-md-4 col-sm-6 hidden">
        <a href="${ctx}/">
        <div class="post-thumb">
            <img src="" alt="暂无封面" width="220px" height="300px">
            <div class="title-over">
                <span>书名 &nbsp;&nbsp;</span><span class="name"></span><br/>
                <span>作者 &nbsp;&nbsp;</span><span class="author"></span><br/>
                <span>价格 &nbsp;&nbsp;</span><span class="price"></span>
            </div>
        </div>
        </a>
    </div> <!-- /.post-masonry -->

    <%@include file="/WEB-INF/jsp/common/component/foot.jsp"%>

    <script>
        //查询的参数
        var searchText = {
            name: {
                type: "string",
                filter: {
                    like: $("#searchName").val()
                }
            },
            status: {
                type: "int",
                filter: {
                    eq: book_status_up
                }
            }
        };

        //每页记录数
        var pageSize = 3;

        $(document).ready(function() {

            $("#toFilterBtn").click(function(){
                $("#searchPanel").fadeToggle(800);
                $("#searchDiv").fadeToggle(800);
            });

            $("#backSearchBtn").click(function(){
                $("#searchPanel").fadeToggle(800);
                $("#searchDiv").fadeToggle(800);
            });

            var r = $(".blog-masonry");

            r.imagesLoaded(function(){
                r.isotope({
                    isAnimated: true
                });
            });//这里参数可以为空，但必须要初始化masonry，否则后面会报找不到方法appended。

//            r.infinitescroll('pause');

            $("#searchBtn").click(function(){
                searchText = {
                    name: {
                        type: "string",
                        filter: {
                            like: $("#searchName").val()
                        }
                    },
                    status: {
                        type: "int",
                        filter: {
                            eq: book_status_up
                        }
                    }
                };

                initScroll(r, pathFormatter, dataFormatter);

                //获取总页数和第一页的数据
                $.ajax({
                    type: "get",
                    url: path + "/book/pageData",
                    data: {
                        page: 1,
                        pageSize: pageSize,
                        filter: JSON.stringify(searchText)
                    },
                    dataType: 'json',
                    success: function(data){
                        var maxPage = (data.total + pageSize -1)/pageSize;
                        r.infinitescroll('update', {
                            maxPage: maxPage
                        });

                        r.infinitescroll('scroll');
                    }
                });

            });

            $("#filterForm").validate({
                rules:{
                    isbn: {
                        number: true
                    },
                    lowPrice: {
                        number: true
                    },
                    highPrice: {
                        number: true
                    }
                },
                errorPlacement: errorPlacement,
                success: success,
                submitHandler: function(){
                    var lowPrice = $("#lowPrice").val();
                    if(!hasData(lowPrice)){
                        lowPrice = 0;
                    }
                    var highPrice = $("#highPrice").val();
                    if(!hasData(highPrice)){
                        highPrice = 1<<30;
                    }

                    var isbn = $("#isbn").val();
                    searchText = {
                        name: {
                            type: "string",
                            filter: {
                                like: $("#name").val()
                            }
                        },
                        price: {
                            type: "float",
                            filter: {
                                lt: highPrice,
                                gt: lowPrice
                            }
                        },
                        author: {
                            type: "string",
                            filter: {
                                like: $("#author").val()
                            }
                        },
                        publishingHouse: {
                            type: "string",
                            filter: {
                                like: $("#publishingHouse").val()
                            }
                        },
                        status: {
                            type: "int",
                            filter: {
                                eq: book_status_up
                            }
                        }
                    };

                    if(hasData(isbn)){
                        searchText.isbn = {
                            type: "string",
                            filter: {
                                eq: isbn
                            }
                        };
                    }

                    initScroll(r, pathFormatter, dataFormatter);

                    //获取总页数和第一页的数据
                    $.ajax({
                        type: "get",
                        url: path + "/book/pageData",
                        data: {
                            page: 1,
                            pageSize: pageSize,
                            filter: JSON.stringify(searchText)
                        },
                        dataType: 'json',
                        success: function(data){
                            var maxPage = (data.total + pageSize -1)/pageSize;
                            r.infinitescroll('update', {
                                maxPage: maxPage
                            });

                            r.infinitescroll('scroll');
                        }
                    });
                }
            });
        });

        function pathFormatter(page){
            return '/book/pageData?page='+ page +'&pageSize=' + pageSize + '&filter=' + JSON.stringify(searchText)  ;
        }

        function dataFormatter(data){
            if(data == null){
                return null;
            }
            data = data.dataObj;
            console.info("data: " + data);
            //data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回调函数
            var elems = [];
            for(var i=0; i<data.length; ++i){
                var elem = $('#here').clone();

                elem.find("a").attr("href", path + "/book/display?id=" + data[i].id);
                elem.find("img").attr("src", getImgUrl(data[i].cover, "l"));
                elem.find(".name").text(data[i].name);
                elem.find(".author").text(data[i].author);
                elem.find(".price").text(data[i].price + " ¥");

                elem.removeAttr("id").removeClass("hidden");
                elems.push(elem);
            }
            return elems;
        }

        function callbackFunc(elems){
            if(elems == null){
                return;
            }
            r.imagesLoaded(function(){
                r.isotope('appended', elems).isotope('layout');
            });
        }

        //清空原有的数据
//        r.children().remove();
//        r.data('infinitescroll', null);
//        r.infinitescroll({
//            navSelector: "#navigation", //导航的选择器，会被隐藏
//            nextSelector: "#navigation a", //包含下一页链接的选择器
//            itemSelector: ".post-masonry", //你将要取回的选项(内容块)
//            maxPage: 0,
//            state: {
//                currPage: 0
//            },
//            debug: true, //启用调试信息
//            animate: false, //当有新数据加载进来的时候，页面是否有动画效果，默认没有
//            extraScrollPx: 10, //滚动条距离底部多少像素的时候开始加载，默认150
//            bufferPx: 40, //载入信息的显示时间，时间越大，载入信息显示时间越短
//            errorCallback: function() {
//                //alert('error');
////                    $('.loaded').removeClass("hidden");
//            }, //当出错的时候，比如404页面的时候执行的函数
//            localMode: true, //是否允许载入具有相同函数的页面，默认为false
//            path: function (page) {
//                console.info("page: " + page);
//                return '/book/pageData?page='+ page +'&pageSize=' + pageSize + '&searchText=' + $("#name").val() ;
//            },
//            dataType: 'json',//可以是json
//            template: function(data) {
//                return dataToHtml(data.dataObj);
//            },
//            loading: {
//                msgText: "加载中...",
//                finishedMsg: '没有新数据了...',
//                selector: '.loading' // 显示loading信息的div
//            }
//        });
//        //                r.infinitescroll('bind');
    </script>
</body>

</html>